<template>
  <div class="index">
    <!-- 数据双向绑定把一个下标下的频道处于活动的状态 -->
    <van-tabs v-model="activeIndex">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <div class="scroll-wrapper">
          <!-- {{ item.name }}内容 -->
          <ArticeList @showMoreAction="showMoreAction" :channel="item" />
        </div>
      </van-tab>
    </van-tabs>
    <!-- 频道列表 开关 通过定位 = true-->
    <div
      v-if="$store.state.tokenInfo.token"
      class="bar-btn"
      @click="showChannelEdit = true"
    >
      <van-icon name="wap-nav" />
    </div>
    <!-- 添加 refMoreAction 为了再父组件中获取 more-action组件-->
    <van-popup v-model="show" round :style="{ width: '80%' }"
      ><MoreAction
        ref="refMoreAction"
        @Cl_dislikes="Cl_dislikes"
        @report="hReports"
      ></MoreAction
    ></van-popup>
    <van-action-sheet v-model="showChannelEdit">
      <!-- <p>频道管理</p>
      <p>频道管理</p>
      <p>频道管理</p> -->
      <ChannelEdit
        @updateCurChannel="updateCurChannel"
        :channels="channels"
        :activeIndex="activeIndex"
        @undateCurIndex="undateCurIndex"
      ></ChannelEdit>
    </van-action-sheet>
  </div>
</template>

<script>
import ArticeList from './articeList';
import MoreAction from './moreAction';
import ChannelEdit from './channelEdit';
export default {
  components: {
    ArticeList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      // 当前的频道
      activeIndex: '0',
      channels: [],
      show: false,
      // 文章id
      activeId: null,
      showChannelEdit: false
    };
  },
  created () {
    this.getChannels();
  },
  methods: {
    //  子组件删除 我的频道  改变高亮 下标排序
    undateCurIndex (v) {
      console.log('高亮下标', v);
      this.activeIndex = v;
    },
    updateCurChannel (v) {
      //  跳转到选中的频道
      console.log(v);
      // 获取传过来的下标
      const idx = this.channels.findIndex((item) => item.id === v.id);
      if (idx !== -1) {
        this.activeIndex = idx;
        this.showChannelEdit = false;
      }
    },
    // 打开频道
    Edit () {
      console.log(123);
      this.showChannelEdit = true;
    },
    //  删除文章
    delArticle () {
      const eventObj = {
        articId: this.activeId,
        channelId: this.channels[this.activeIndex]
      };
      console.log(eventObj);
      this.$eventBus.$emit('delArticle', eventObj);
    },
    // 举报文章
    async hReports (v) {
      const res = await this.api.reports({ target: this.activeId, type: v });
      console.log('举报', v);
      console.log('几包文章', res);
      this.delArticle();
      this.show = false;
    },
    //  不感兴趣
    Cl_dislikes () {
      this.api
        .dislikeArticle(this.activeId)
        .then((res) => {
          // 退出弹出层
          this.show = false;
          console.log(res);
          // 把用户点击的哪个文章删掉
          // 参数是当前文章的编号以及当前文章的频道
          this.delArticle();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开 叉号选项
    showMoreAction (v) {
      this.activeId = v;
      this.show = true;
      // 关闭的二层弹窗
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false;
      }
    },
    //  获取频道
    async getChannels () {
      try {
        const res = await this.api.channels();
        console.log('000', res);
        this.channels = res.data.data.channels;
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

<style>
</style>
